<title>覆盖层</title>

<link rel="stylesheet" href="/vendor/plyr/plyr.css">

<div class="page animation-fade">
    <div class="page-header">
        <h1 class="page-title">覆盖层</h1>
        <div class="page-header-actions">
            <form>
                <div class="input-search input-search-dark">
                    <i class="input-search-icon wb-search" aria-hidden="true"></i>
                    <input type="text" class="form-control" name="" placeholder="搜索...">
                </div>
            </form>
        </div>
    </div>
    <div class="page-content">

        <div class="panel">
            <div class="panel-body container-fluid">
                <div class="row row-lg">
                    <div class="col-sm-6">

                        <div class="example-wrap">
                            <h4 class="example-title">视频 &amp; 音频</h4>
                            <div class="example">
                                <div class="cover plyr">
                                    <video poster="/images/poster.jpg" controls crossorigin>

                                        <source type="video/mp4" src="https://cdn.selz.com/plyr/1.0/movie.mp4">
                                        <source type="video/webm" src="https://cdn.selz.com/plyr/1.0/movie.webm">

                                        <track kind="captions" label="English" srclang="en" src="//cdn.selz.com/plyr/1.0/en.vtt" default>

                                        <a href="https://cdn.selz.com/plyr/1.0/movie.mp4">下载</a>
                                    </video>
                                </div>
                            </div>
                            <div class="example">
                                <div class="cover plyr">
                                    <audio controls>

                                        <source type="audio/mp3" src="https://cdn.selz.com/plyr/1.0/logistics-96-sample.mp3">
                                        <source type="audio/ogg" src="https://cdn.selz.com/plyr/1.0/logistics-96-sample.ogg">

                                        <a href="https://cdn.selz.com/plyr/1.0/logistics-96-sample.mp3">下载</a>
                                    </audio>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="col-sm-6">

                        <div class="example-wrap">
                            <h4 class="example-title">引用</h4>
                            <p>通过添加 <code>.cover-quote</code> 类实现。</p>
                            <div class="example">
                                <div class="cover">
                                    <blockquote class="cover-quote">风吹柳花满店香，吴姬压酒劝客尝。</blockquote>
                                </div>
                            </div>
                            <p>引用背景</p>
                            <div class="example">
                                <div class="cover">
                                    <div class="cover-background padding-vertical-30" style="background-image: url('/images/photos/city-2.jpg')">
                                        <blockquote class="cover-quote white">风吹柳花满店香，吴姬压酒劝客尝。</blockquote>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="clearfix"></div>
                    <div class="col-sm-6">

                        <div class="example-wrap">
                            <h4 class="example-title">Iframe</h4>
                            <p>通过添加 <code>.cover-iframe</code> 类实现。</p>
                            <div class="example">
                                <div class="cover">
                                    <iframe class="cover-iframe height-500 height-xs-300" src="https://cdn.selz.com/plyr/1.0/movie.mp4"></iframe>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="col-sm-6">

                        <div class="example-wrap">
                            <h4 class="example-title">背景图片</h4>
                            <p>通过添加 <code>.cover-background</code> 类实现。</p>
                            <div class="example">
                                <div class="cover height-500 height-xs-300">
                                    <div class="cover-background" style="background-image: url('/images/photos/city-1.jpg')"></div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="clearfix"></div>
                    <div class="col-sm-6">

                        <div class="example-wrap margin-sm-0">
                            <h4 class="example-title">响应式图片</h4>
                            <p>通过添加 <code>.cover-image</code> 类实现。</p>
                            <div class="example">
                                <div class="cover">
                                    <img class="cover-image" src="/images/photos/city-3.jpg" alt="...">
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="col-sm-6">

                        <div class="example-wrap">
                            <h4 class="example-title">相册</h4>
                            <p>通过添加 <code>.cover-gallery</code> 类实现</p>
                            <div class="example">
                                <div class="cover">
                                    <div class="cover-gallery carousel slide" id="cover-gallery-example" data-ride="carousel">
                                        <ol class="carousel-indicators">
                                            <li class="active" data-target="#cover-gallery-example" data-slide-to="0"></li>
                                            <li data-target="#cover-gallery-example" data-slide-to="1"></li>
                                            <li data-target="#cover-gallery-example" data-slide-to="2"></li>
                                        </ol>
                                        <div class="carousel-inner" role="listbox">
                                            <div class="item active">
                                                <img alt="第1张图片" src="/images/photos/city-4.jpg">
                                            </div>
                                            <div class="item">
                                                <img alt="第2张图片" src="/images/photos/city-5.jpg">
                                            </div>
                                            <div class="item">
                                                <img alt="第3张图片" src="/images/photos/city-6.jpg">
                                            </div>
                                        </div>

                                        <a class="left carousel-control" href="#cover-gallery-example" data-slide="prev" role="button">
                                            <span class="icon wb-chevron-left" aria-hidden="true"></span>
                                            <span class="sr-only">上一张</span></a>
                                        <a class="right carousel-control" href="#cover-gallery-example" data-slide="next" role="button">
                                            <span class="icon wb-chevron-right" aria-hidden="true"></span>
                                            <span class="sr-only">下一张</span></a>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<script src="/vendor/plyr/plyr.min.js"></script>
